<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org/">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>个人中心-提现</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <div th:include="includeJs::includeJs"></div>
  <div th:include="includeJs::layui_js"></div>

  <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/common.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/user.css}">
  <link rel="stylesheet" th:href="@{/css/userInfo/fileupload.less.css}">

  <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/common.js}"></script>
  <script type="text/javascript" th:src="@{/js/userInfo/user.js}"></script>
</head>
<body>
<!--最上面-->
<link th:replace="includeJs::dingding_header">
<!--第二上面-->
<div style="background-color: white;width: 100%">
  <link th:replace="includeJs::dingding_nav">
</div>
<!--个人中心-->
<div class="wrapper wbgcolor">
  <div class="w1200 personal">
    <link th:replace="includeJs::userInfoMenu">
    <div class="personal-main">
      <div class="personal-deposit">
        <h3><i>提现</i></h3>
          <input type="hidden" id="userId" name="userId" th:value="${user.getId()}"/>
          <input type="hidden" name="form" value="form">
          <div class="deposit-form" style="margin-top:0px;border-top:0px none;">
            <h6>填写提现金额</h6>
            <ul>
              <li>
                <span class="deposit-formleft">可用金额</span>
                <span class="deposit-formright"> <i>
                <label id="form:blance" th:text="${userInfo.getMoney()}">0.00</label>
                </i>元 </span>
              </li>
              <li>
                <span class="deposit-formleft">提现金额</span>
                <span class="deposit-formright">
                  <input id="recharge:actualMoney" name="recharge:actualMoney" class="deposite-txt" maxlength="10"  placeholder="金额最少10元"  onblur="checkRecharge()" onkeydown="amount(this);keyUpcheck()" onkeyup="amount(this);keyUpcheck()" />
                  <em>元</em>
                </span>
                <span id="actualMoneyErrorDiv"  style="color: red;margin-left: 30px;" >
                </span>
              </li>
             <!-- <li >
                <span th:each="userBank:${userBanks}">
                  <img th:id="${userBank.BId}" th:src="'https://apimg.alipay.com/combo.png?d=cashier&t='+${userBank.bankCode}">
                </span>
              </li>-->

              <li>
                <span class="deposit-formleft">提现费用</span>
                <em id="txfy" class="markicon fl"></em>
                <span class="deposit-formright deposit-formright1"> <i>
                  <label id="form:fee" >
                    <span id="procedure">0.00</span>
                  </label>
                  </i>元
                </span>
                <span class="txarrow-show">提现金额的0.1%</span>
                <span class="txicon-show"></span>
              </li>
              <li>
                <span class="deposit-formleft">实际到账金额</span>
                <em id="dzje" class="markicon fl"></em>
                <span class="deposit-formright deposit-formright1"> <i>
                  <label id="form:cashFine">
                    <span id="practical">0.00</span>
                  </label>
                  </i> 元
                </span>
                <span class="dzarrow-show">提现金额 - 提现费用</span>
                <span class="dzicon-show"></span>
              </li>
              <li height="40px" >
                <span id="paysSpan" th:each="userBank:${userBanks}">
                <img th:id="${userBank.BId}" th:src="'https://apimg.alipay.com/combo.png?d=cashier&t='+${userBank.bankCode}">
                </span>
              </li>
              <li>
                <input type="button" id="tx" name="form:j_idt78" value="提现" class="btn-depositok">
              </li>
            </ul>

          </div>

        <div class="deposit-tip"> 温馨提示：<br>
          1、用户需在完成身份认证、开通丰付托管账户并绑定银行卡后，方可申请提现；<br>
          2、请务必在提现时使用持卡人与身份认证一致的银行卡号，且确保填写信息准确无误；<br>
          3、工作日当天16:00前提交的提现申请将在当天处理，默认为T+1到账；<br>
          4、提现金额单笔上限为50万元，单日累计总额不可超过100万元；<br>
          5、提现手续费为提现金额的0.1%，手续费由第三方托管账户收取，用户自行承担。<br>
        </div>
      </div>
    </div>
  </div>

  <div  id="password-div" class="password-div" style="display: none;margin-left: 120px;margin-top: 35px;">
    <label id="pwd" for="password" class="password-lable">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <input id="password" type="password" name="password" maxlength="6">
    </label>
    <div style="margin-top: 50px;margin-left: 50px;">
      <button type="button" id="qdcz" class="layui-btn layui-btn-danger  layui-btn-radius" style="width: 100px;">确定</button>
    </div>
  </div>

</div>
<link th:replace="includeJs::userInfoJS">
<script type="text/javascript">
  $("#form\\:actualMoney").focus(
          function(){
            $(this).css({"font-size":"24px","font-weight":"bold","font-family":"Arial","border":"1px solid #0caffe"});
            if($("#form\\:actualMoney").val() == value) {
              $("#form\\:actualMoney").val("")
              $(this).css({"font-size":"24px","font-weight":"bold","font-family":"Arial"});
            }
          }).blur(
          function(){
            $(this).css("border","1px solid #D0D0D0");
            if($("#form\\:actualMoney").val() == "") {
              $(this).css({"color":"#D0D0D0","font-size":"14px","font-weight":"normal"});
            }
          })

  function keyUpcheck(){
    $(this).css({"font-size":"24px","font-weight":"bold","font-family":"Arial"});
  }
  //输入金额
  function checkRecharge() {
    var moneyRegex="^(([1-9]+[0-9]*)|((([1-9]+[0-9]*)|0)\\.[0-9]{1,2}))$";
    var money = $("#recharge\\:actualMoney").val();
    var nullFlag=(money=="")||money<=0;
    var numberFlag=isNaN(money);
    //如果输入为空
    if(nullFlag) {
      var $span = "<em></em>请输入金额";
      $("#actualMoneyErrorDiv").html($span);
      return false;
    }else if(money <10){
      var $span = "<em></em>金额最低10元";
      $("#actualMoneyErrorDiv").html($span);
      return false;
    }else {
      $("#actualMoneyErrorDiv").html("");
    }
    //如果输入的不是数字
    if(numberFlag) {
      var $span = "<em></em>请输入数字</span>";
      $("#actualMoneyErrorDiv").html($span);
      return false;
    }
    else {
      $("#actualMoneyErrorDiv").html("");
    }
    //输入金额是否合法
    var moneyPattern = new RegExp(moneyRegex);
    var legalFlag=moneyPattern.test(money);
    if(!legalFlag)
    {
      var $span = "<em></em>金额必须大于1且为整数或小数，小数点后不超过2位</span>";
      $("#actualMoneyErrorDiv").html($span);
      return false;
    }
    else {
      let  $m = money*0.001;
      let $num =$m.toFixed(2);
      if(money>=1){
        let $span = "<em></em>"+$num;
        $("#procedure").html($span);
      }
      let $practical =money-$num;
      let $spanPractical = "<em></em>"+$practical;
      $("#practical").html($spanPractical)
      $("#actualMoneyErrorDiv").html("");
    }
    return true;
  }



  function amount(th){
    var regStrs = [
      ['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0
      ['[^\\d\\.]+$', ''], //禁止录入任何非数字和点
      ['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点
      ['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上
    ];
    for(i=0; i<regStrs.length; i++){
      var reg = new RegExp(regStrs[i][0]);
      th.value = th.value.replace(reg, regStrs[i][1]);
    }
    if(th.value>9999999.99){
      th.value = th.value.substr(0,th.value.length-1);
    }
  }

  layui.use(['layer','element'], function() {
    var $ = layui.jquery,
            layer = layui.layer,//独立版的layer无需执行这一句
            element = layui.element
    //选择银行卡
    $('#paysSpan img').each(function (e) {
      $(this).click(function () {
        $(this).css('border','1px solid #f1483c').parents().siblings().children('img').css('border','1px solid #D0D0D0');
      });
    });

    $("#tx").click(function () {
      let $blanc =$("#form\\:blance").text();//可用余额
      let $actual = $("#recharge\\:actualMoney").val();//提现金额
      let id=null;
      $('#paysSpan img').each(function (e) {
        if ($(this).css('border') == '1px solid rgb(241, 72, 60)'){
          id = $(this).attr('id')
        }
      });
      if(id ==null){
        layer.msg('请选择银行卡',{time:2000,icon:2})
        return;
      }
      let $je = $actual -$blanc;
      if($je >0){
        layer.msg('提现金额不能大于可用余额',{time:2000,icon:2});
        $("#recharge\\:actualMoney").val("");
        $("#procedure").html(0.00);
        $("#practical").html(0.00);
        return;
      }

      var rechargeFlag=checkRecharge(); //提现金额
      if(id!=null && rechargeFlag){
        $.ajax({
          url:"/bankRecharge/"+$("#userId").val()+"/"+$actual+"/"+id,
          type: "post",
          dataType:"json",
          success: function (data) {
            if(data==1){
              layer.msg('您还未设置交易密码，请前往设置',{time:3000,icon:2});
              return;
            }else {
              layer.open({
                type: 1,
                title: '请输入密码',
                skin: 'layui-layer-demo', //样式类名
                area: ['450px', '200px'],
                closeBtn: 2, //不显示关闭按钮
                fixed: false, //不固定
                maxmin: true,
                content: $('#password-div'),
                cancel: function(){//右上角关闭回调
                  //刷新父页面
                  $("#pwd ul li").text('');
                }
              });
              $("#pwd").focus();
            }
          },
          error:function () {
            layer.msg('呀呀呀,报错啦',{time:3000,icon:2});
            return false;
          }
        })
      }
    })
    //确定提现
    $("#qdcz").click(function () {
      $(this).removeClass("layui-btn-danger")
      $(this).addClass("layui-btn-disabled")
      this.disabled =true;
      var btn = this;
      let $password= $("#password").val();
      if(null == $password || $password.length!=6){
        layer.msg('请输入密码。',{time:2000,icon:2});
        $(this).removeClass("layui-btn-disabled")
        $(this).addClass("layui-btn-danger")
        $(this).disabled =false;
        return;
      }else {
        $.ajax({//查找交易密码
          url:"/tx/"+$("#userId").val()+"/"+$password+"/"+$("#recharge\\:actualMoney").val(),
          type:"post",
          dataType:"json",
          success:function (data) {
            $(btn).removeClass("layui-btn-disabled")
            $(btn).addClass("layui-btn-danger")
            $(btn).disabled =true;
            if(data ==0){
              layer.msg('提现成功',{time:2000,icon:1});
              setTimeout(function (){
                $(btn).disabled =true;
              },2000);
              window.location.reload();
            }else if(data==2){
              layer.msg("账户已被锁定,请明天再试!",{time:2000,icon:2});
              $("#pwd ul li").text('');
              //$("#pwd").focus();
              return;
            }else if(data==1){
              layer.msg("密码错误,请重新输入",{time:2000,icon:2});
              $("#pwd ul li").text('');
              $(btn).disabled =false;
              return;
            }
          },
          error:function () {
            $(btn).removeClass("layui-btn-disabled")
            $(btn).addClass("layui-btn-danger")
            layer.msg('呀呀呀,报错啦',{time:2000,icon:2});
          }
        })
      }
    })
  })
  $(function () {
    $(document).keydown(function (e) {
      if (e.keyCode === 13) {
        $("#qdcz").click();
      }
    });
  });

</script>
<script>
  //查询支付密码
  $(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
    var number = 6;   //定义输入最大值
    var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
    var list = $(".password-div ul li");  //定义list是li
    for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
      if(pw[i]){
        $(list[i]).text("·");
      }else{
        $(list[i]).text("");
      };
    };
  });
  $(".password-div ul").click(function(){
    $("input[name = 'password']").val("");
    $("#password").focus();
    $(".password-div ul li").text("");
  });
</script>
</body>
</html>
